﻿
uiPlace.UI.Map = {
    Data: {
        Id: 0,
        Name: "",
        Description: "",
        PicUrl: "",
        Link: null     
    },

    GeographyPoint: {
        Latitude: 0,
        Longitude: 0
    },

    MapType: {
        ROADMAP: "ROADMAP",
        SATELLITE: "SATELLITE ",
        HYBRID: "HYBRID",
        TERRAIN: "TERRAIN"
    },

    MapOptions: {
        Zoom: 0,
        Center: null, 
        MapType: "ROADMAP"
    },

    Marker: {
        Id: 0,
        Data: null,
        Position: null
    }
};

iuPlace.UI.Map.Create = function (elementName, mapOptions) {
    var obj = this;
    var map;
    var markers = [];
    var currentOptions = mapOptions;
    var elementName = elementName;

    this.Initialize = function () {

        var mapCenter = new google.maps.LatLng(currentOptions.Center.Latitude, currentOptions.Center.Longitude);

        var mapType;
        switch (currentOptions.MapType) {
            case "ROADMAP":
                mapType = google.maps.MapTypeId.ROADMAP;
                break;
            case "SATELLITE":
                mapType = google.maps.MapTypeId.SATELLITE;
                break;
            case "HYBRID":
                mapType = google.maps.MapTypeId.HYBRID;
                break;
            case "TERRAIN":
                mapType = google.maps.MapTypeId.TERRAIN;
                break;
            default:
                mapType = google.maps.MapTypeId.ROADMAP;
                break;
        }

        var options = {
            zoom: currentOptions.Zoom,
            center: mapCenter,
            mapTypeId: mapType
        };

        map = new google.maps.Map(document.getElementById(elementName), options);
    }

    this.addMarker = function (marker) {

        this.Data = $.extend({}, iuPlace.UI.Map.Data, marker.Data);
        this.ElementJQuery = $("#UI_MarkerTemplate").render(obj.Data);
        var latlng = new google.maps.LatLng(marker.Position.Latitude, marker.Position.Longitude);

        var marker = new google.maps.Marker({
            id: marker.Id,
            position: latlng,
            title: marker.Data.Name,
            map: map,
            animation: google.maps.Animation.DROP,
            descrip: this.ElementJQuery.html(),
            link: marker.Data.Link,
            icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
        });

        google.maps.event.addListener(marker, 'mouseover', function () {
            var boxText = document.createElement("div");
            boxText.innerHTML = this.descrip;
            tooltip.show(this.descrip);
        });

        google.maps.event.addListener(marker, 'mouseout', function () {
            tooltip.hide();
        });

        if (marker.Link != null)
            google.maps.event.addListener(marker, 'click', function () {
                window.open(this.link);
            });

        markers.push(marker);
    }

    this.clearMarkers = function () {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
        }
    }

    this.getMarker = function (id) {
        markers.fil
    }

    this.toggleBounce = function (id) {
        var marker;

        for (var i = 0; i < markers.length; i++) {
            markers[i].setAnimation(null);
        }

        for (var i = 0; i < markers.length; i++) {
            if (markers[i].id == id) {                
                marker = markers[i];
                break;
            }
        }

        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    var tooltip = function () {
        var id = 'tt';
        var top = 3;
        var left = 3;
        var maxw = 300;
        var speed = 10;
        var timer = 20;
        var endalpha = 95;
        var alpha = 0;
        var tt, t, c, b, h;
        var ie = document.all ? true : false;
        return {
            show: function (v, w) {
                if (tt == null) {
                    tt = document.createElement('div');
                    tt.setAttribute('id', id);
                    t = document.createElement('div');
                    t.setAttribute('id', id + 'top');
                    c = document.createElement('div');
                    c.setAttribute('id', id + 'cont');
                    b = document.createElement('div');
                    b.setAttribute('id', id + 'bot');
                    tt.appendChild(t);
                    tt.appendChild(c);
                    tt.appendChild(b);
                    document.body.appendChild(tt);
                    tt.style.opacity = 0;
                    tt.style.filter = 'alpha(opacity=0)';
                    document.onmousemove = this.pos;
                }
                tt.style.display = 'block';
                tt.style.position = 'absolute';
                c.innerHTML = v;
                tt.style.width = w ? w + 'px' : 'auto';
                if (!w && ie) {
                    t.style.display = 'none';
                    b.style.display = 'none';
                    tt.style.width = tt.offsetWidth;
                    t.style.display = 'block';
                    b.style.display = 'block';
                }
                if (tt.offsetWidth > maxw) { tt.style.width = maxw + 'px' }
                h = parseInt(tt.offsetHeight) + top;
                clearInterval(tt.timer);
                tt.timer = setInterval(function () { tooltip.fade(1) }, timer);
            },
            pos: function (e) {
                var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
                var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
                tt.style.top = '0px';
                tt.style.left = '0px';
                tt.style.top = (u - h) + 'px';
                tt.style.left = (l + left) + 'px';
            },
            fade: function (d) {
                var a = alpha;
                if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
                    var i = speed;
                    if (endalpha - a < speed && d == 1) {
                        i = endalpha - a;
                    } else if (alpha < speed && d == -1) {
                        i = a;
                    }
                    alpha = a + (i * d);
                    tt.style.opacity = alpha * .01;
                    tt.style.filter = 'alpha(opacity=' + alpha + ')';
                } else {
                    clearInterval(tt.timer);
                    if (d == -1) { tt.style.display = 'none' }
                }
            },
            hide: function () {
                clearInterval(tt.timer);
                tt.timer = setInterval(function () { tooltip.fade(-1) }, timer);
            }
        };
    } ();
};